<template>
  <div>
    <el-main>
      <el-row
        :gutter="30"
        style="border: 1px solid #409eff;border-radius: 3%; width: 90%; margin: 0 auto"
      >
        <div style="display: flex; width: 100%">
          <el-button style="background-color: #f56c6c; color: white"
            >请输入查询内容</el-button
          >
          <el-input placeholder="请输入内容" style="width: 90%" v-model="neirong"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="tiaozhuan()">点击</el-button>
        </div>
      </el-row>
      <div
        style="
          width: 85% !important;
          margin: 10px auto 0;
        "
      >
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in list" :key="item">
            <img
              :src="`${$Imgurl}/api/public/showImg/${item.picture}`"
              style="width: 100%; height: 28vw; display: block !important"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-main>
    <el-footer style="width: 100%; margin: 0 auto">
      <div class="wu">
        <h4>好评最高的5本书</h4>
        <ul>
          <li v-for="item in imgURL" :key="item.id">
            <img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
            <span style="display: block">{{ item.name }}</span>
            <p>
              ￥{{ item.price }}
              <el-button type="danger" @click="goumai()">购买</el-button>
            </p>
          </li>
        </ul>
      </div>
      <div class="wu">
        <h4>好评最高的5本书</h4>
        <ul>
          <li v-for="item in imgURL" :key="item.id">
            <img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
            <span style="display: block">{{ item.name }}</span>
            <p>
              ￥{{ item.price }}
              <el-button type="danger" @click="goumai()">购买</el-button>
            </p>
          </li>
        </ul>
      </div>
      <div class="wu">
        <h4>好评最高的5本书</h4>
        <ul>
          <li v-for="item in imgURL" :key="item.id">
            <img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" />
            <span style="display: block">{{ item.name }}</span>
            <p>
              ￥{{ item.price }}
              <el-button type="danger" @click="goumai()">购买</el-button>
            </p>
          </li>
        </ul>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      list: [],
      imgURL: [],
      imgURLS: [],
      imgURLSS: [],
	  // 输入内容
	  neirong:'',
	  // 
    };
  },
  created() {
    this.axios
      .get("/api/public/book/findRate5")
      .then((res) => {
        this.imgURL = res.data.data;
        console.log(this.imgURL);
      })
      .catch((error) => {
        console.log(error);
      });
    //
    this.axios
      .get("/api/public/book/findSale5")
      .then((res) => {
        this.imgURLS = res.data.data;
        console.log(this.imgURLS);
      })
      .catch((error) => {
        console.log(error);
      });
    //
    this.axios
      .get("/api/public/book/findFav5")
      .then((res) => {
        this.imgURLSS = res.data.data;
        console.log(this.imgURLSS);
      })
      .catch((error) => {
        console.log(error);
      });
    this.axios
      .get("/api/public/findHot/5/1")
      .then((res) => {
        this.list = res.data.data;
        console.log(this.list);
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods:{
	  tiaozhuan(){
		  if(this.neirong!=''){
			  this.$router.push({
			  	path:`/home/details/${this.neirong}`
			  });
		  }else{
			  this.$router.push('/home/details/:id');
		  }
	  },
	  goumai(){
		  this.$router.push('/home/cart');
	  }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.wu {
  height: 400px;
}
h4 {
  border-bottom: 2px solid #ff4500;
  margin: -5px auto 0;
  width: 88%;
  line-height: 50px;
  color: #c71585;
}
ul {
  list-style: none;
  width: 80%;
  margin: 20px auto 0;
  text-align: center;
}
ul li {
  width: 20%;
  height: 300px;
  float: left;
}
ul li img {
  height: 200px;
}
/* 幻灯片 */
.el-carousel__item {
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
